<template>
  <a-drawer width="600px" :open="true" :title="`${item ? '编辑' : '添加'}商家`" @close="onClose">
    <a-form ref="formRef" :model="formState" layout="vertical" :rules="rules">

      <a-form-item label="名称" name="name">
        <a-input v-model:value="formState.name" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="地址" name="addressObj" :autoLink="false">
        <AddressInput :value="formState.addressObj" @update:value="onAddressChange" />
      </a-form-item>
      <a-form-item label="联系人" name="contactUser">
        <a-input v-model:value="formState.contactUser" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="联系电话" name="contactPhone">
        <a-input v-model:value="formState.contactPhone" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="认证" name="verified">
        <a-switch v-model:checked="formState.verified" />
      </a-form-item>
      <a-form-item label="备注" name="remark">
        <a-textarea v-model:value="formState.remark" placeholder="请输入" />
      </a-form-item>
      <a-form-item label="图片视频(第一张封面)">
        <a-upload :multiple="true" accept="image/*,video/*" v-model:file-list="fileList" list-type="picture-card"
          :before-upload="beforeUpload">
          <div>
            <plus-outlined />
            <div style="margin-top: 8px">上传</div>
          </div>
        </a-upload>
      </a-form-item>
      <a-form-item>
        <a-space>
          <a-button type="primary" @click="toSave" :loading="saving">保存</a-button>
        </a-space>
      </a-form-item>
    </a-form>
  </a-drawer>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue'
import { saveStore } from '@/api/store';
import { uploadFiles, getFile } from '@/api/att';
import { message } from 'ant-design-vue'
import { confirm } from '@/mixin'
import AddressInput from './AddressInput.vue';

const props = defineProps(['item'])
const emit = defineEmits(['close', 'saved'])

const rules = {
  name: [
    { required: true, message: '请输入商家名称' }
  ],
  addressObj: [
    { required: true, message: '请输入地址', trigger: 'change' }
  ],
}

const formRef = ref(null)
const formState = reactive({})
const saving = ref(false)
const fileList = ref([])

onMounted(() => {
  parseItem()
})

const parseItem = () => {
  const it = props.item
  if (it) {
    formState.name = it.name
    formState.address = it.address
    formState.contactUser = it.contactUser
    formState.contactPhone = it.contactPhone
    formState.verified = it.verified
    formState.remark = it.remark

    if(it.lat && it.lng){
      formState.addressObj = {
        lat: it.lat,
        lng: it.lng,
        adcode: it.adcode,
        province: it.province,
        city: it.city,
        district: it.district,
        address: it.address,
      }
    }

    if (it.medias && it.medias.length > 0) {
      fileList.value = it.medias.map(i => {
        return {
          id: i.id,
          mime: i.mime,
          name: i.name,
          size: i.fileSize,
          url: getFile(i.id)
        }
      })
    }
  } else {
    formState.name = null
    formState.address = null
    formState.addressObj = null
    formState.contactUser = null
    formState.contactPhone = null
    formState.verified = false
    formState.remark = null
    fileList.value = []
  }
}

const onClose = () => {
  emit('close')
}

const toSave = () => {
  formRef.value.validate().then(values => {
    confirm('您确定要保存商家信息吗?', async () => {
      const ado = values.addressObj
      if (ado) {
        const { address, lat, lng, province, city, district, adcode } = ado
        values.address = address
        values.lat = lat
        values.lng = lng
        values.province = province.name
        values.city = city.name
        values.district = district.name
        values.adcode = adcode

        delete values.addressObj
      }
      if (props.item) {
        values.id = props.item.id
      }
      saving.value = true

      // 先上传附件
      const origin = fileList.value.filter(i => i.id)
      const files = fileList.value.filter(i => i.originFileObj).map(i => i.originFileObj)
      let atts = [...origin]
      if (files.length > 0) {
        const arr = await uploadFiles(files)
        atts.push(...arr)
      }
      values.medias = atts

      const res = await saveStore(values)
      saving.value = false
      if (res.data) {
        message.success('保存成功')
        emit('saved')
      } else {
        message.error('保存失败')
      }
    })
  })
}

const beforeUpload = file => {
  return false;
}

const onAddressChange = (v) => {
  formState.addressObj = v;
}
</script>

<style lang="less" scoped></style>